<template>
    <Dialog :app-dialog="appDialogCustomer" @close="closeDialog">
        <div class="allcontent">
            <div class="content">
                <div class="column" @click="addCustomer(1)">
                    <img src="@/assets/customer/customer_pic.png" /><span class="text">个人客户</span>
                </div>
                <div class="column" @click="addCustomer(2)">
                    <img src="@/assets/customer/enterprise.png" /><span class="text">企业客户</span>
                </div>
            </div>
        </div>
        <div class="tiptext">
            <el-checkbox v-model="ischecked" @change="changeTip">勾选之后，将不再提醒</el-checkbox>
        </div>
    </Dialog>

    <NewClub
        ref="NewClubRef"
        v-model="openPerson"
        :source-arr="sourceArr"
        :source-all-arr="sourceAllArr"
        @submit="submitData"
        @close="closeNewClub" />

    <NewClubCompany
        ref="NewClubCompanyRef"
        v-model="openCompany"
        :source-arr="sourceArr"
        :source-all-arr="sourceAllArr"
        @close="closeNewClubCompany"
        @submit="submitData(true)"></NewClubCompany>
</template>
<script setup lang="ts">
import {
    ref,
    reactive,
    computed,
    watch,
    onMounted,
    onBeforeUnmount,
    getCurrentInstance,
    ComponentInternalInstance
} from 'vue';
import { sourceList } from '@/view/customer/manage/configure/api';
import { deepCopy } from '@/utils/helper';
import router from '@/router';
import Dialog from '@/components/Dialog.vue';
import NewClub from './NewClub.vue';
import NewClubCompany from './NewClubCompany.vue';

const { appContext } = getCurrentInstance() as ComponentInternalInstance;

const globalProperties = ref(appContext.config.globalProperties);
// const {
//     appContext: {
//         config: { globalProperties }
//     }
// } = <ComponentInternalInstance>getCurrentInstance();

onMounted(() => {
    globalProperties.value.$bus.on('openAddCustomerSelect', () => {
        localStorage.removeItem('add_customer_optional');
        localStorage.removeItem('add_customer_select');
        ischecked.value = false;
        openPerson.value = false;
        openCompany.value = false;
        appDialogCustomer.visible = true;
    });
});

onBeforeUnmount(() => {
    globalProperties.value.$bus.off('openAddCustomerSelect');
});

type Props = {
    modelValue: boolean;
    seas_id: number;
    row_id: string;
    isEdit: boolean;
};
const props = defineProps<Props>();
const emit = defineEmits(['update:modelValue', 'close', 'submit']);
const updateVisible = (flag: boolean): void => {
    emit('update:modelValue', flag);
};

type appDialogType = {
    visible?: boolean;
    title?: string;
    width?: string;
    isHiddenFoot?: boolean;
};
const appDialogCustomer = reactive<appDialogType>({
    visible: false,
    title: '选择客户类型',
    width: '500px',
    isHiddenFoot: true
});

watch(
    () => props.modelValue,
    val => {
        NewClubRef.value.drawerData = drawerData;
        NewClubCompanyRef.value.drawerData = drawerData;
        if (val) {
            switch (drawerData.controlType) {
                case 'create':
                    openCustomerCreate();
                    break;
                case 'edit':
                    openCustomerEdit();
                    break;
                case 'look':
                    openCustomerLook();
                    break;
            }
        } else {
            appDialogCustomer.visible = false;
        }
    }
);

const openCustomerCreate = (): void => {
    drawerData.userInfo = null;
    drawerData.controlType = 'create';
    if (Number(localStorage.getItem('add_customer_optional')) === 1) {
        appDialogCustomer.visible = false;
        if (localStorage.getItem('add_customer_select')) {
            switch (localStorage.getItem('add_customer_select')) {
                case '1':
                    drawerData.title = '添加个人客户';
                    openAddCustomer(1);
                    break;
                case '2':
                    drawerData.title = '添加企业客户';
                    openAddCustomer(2);
                    break;
                default:
                    appDialogCustomer.visible = true;
                    localStorage.removeItem('add_customer_optional');
                    break;
            }
        }
    } else {
        appDialogCustomer.visible = true;
        localStorage.removeItem('add_customer_select');
    }
};

const openCustomerEdit = (): void => {
    switch (Number(drawerData.userInfo.type)) {
        case 1:
            drawerData.title = '编辑个人客户';
            break;
        case 2:
            drawerData.title = '编辑企业客户';
            break;
    }
    openAddCustomer(drawerData.userInfo.type);
};

const openCustomerLook = (): void => {
    switch (Number(drawerData.userInfo.type)) {
        case 1:
            drawerData.title = '查看个人客户';
            break;
        case 2:
            drawerData.title = '查看企业客户';
            break;
    }
    openAddCustomer(drawerData.userInfo.type);
};

const defaultParams = {};
const state = reactive({
    searchParams: deepCopy(defaultParams)
});

// let isEdit = ref<boolean>(false) //点击新增个人客户打开新增客户为false 表格操作栏点击编辑为false

const openPerson = ref<boolean>(false);
const openCompany = ref<boolean>(false);

const ischecked = ref<boolean>(false);

const drawerData = reactive<any>({
    title: '添加个人客户',
    direction: 'rtl',
    userInfo: {},
    controlType: 'create'
});

const NewClubRef = ref<any>(null);
const NewClubCompanyRef = ref<any>(null);
const sourceArr = reactive<any>([]);
const sourceAllArr = reactive<any>([]);
const sourceListFun = () => {
    sourceList({ page: 1, page_size: 99 }).then((r: any) => {
        r.data = r.data || [];
        const arr = [{ name: '全部', id: -1 }];
        r.data.forEach((it: any) => {
            if (it.status == 1) {
                // 开启的话显示
                arr.push(it);
            }
        });
        sourceArr.splice(0);
        sourceArr.push(...arr);
        sourceAllArr.splice(0);
        sourceAllArr.push(...r.data);
    });
};
sourceListFun();

const addCustomer = (addCustomerSelect: number): void => {
    if (Number(localStorage.getItem('add_customer_optional')) === 1) {
        localStorage.setItem('add_customer_select', addCustomerSelect.toString());
    } else {
        localStorage.removeItem('add_customer_select');
    }
    drawerData.userInfo = {};
    drawerData.controlType = 'create';
    openAddCustomer(addCustomerSelect);
};
const openAddCustomer = (addCustomerSelect: number | string): void => {
    updateVisible(false);
    appDialogCustomer.visible = false;
    switch (Number(addCustomerSelect)) {
        case 1:
            openPerson.value = true;
            break;
        case 2:
            openCompany.value = true;
            break;
    }
};

const changeTip = (ischecked: boolean): void => {
    if (ischecked) {
        localStorage.setItem('add_customer_optional', '1');
    } else {
        localStorage.removeItem('add_customer_optional');
    }
};
const closeDialog = (): void => {
    emit('update:modelValue', false);
    if (!localStorage.getItem('add_customer_select')) {
        localStorage.removeItem('add_customer_optional');
    }
};

const closeNewClub = (): void => {
    openPerson.value = false;
    // appDialogCustomer.visible = false;
    emit('close');
};
const closeNewClubCompany = (): void => {
    openCompany.value = false;
    // appDialogCustomer.visible = false;
    emit('close');
};

const submitData = (flag: boolean): void => {
    if (flag) {
        openCompany.value = false;
    } else {
        openPerson.value = false;
    }
    emit('submit');
    reset(flag);
};

const reset = (flag: boolean): void => {
    if (flag) {
        state.searchParams = deepCopy(defaultParams);
    } else {
        state.searchParams = deepCopy(defaultParams);
    }
};

defineExpose({
    drawerData
});
</script>
<style scoped lang="scss">
.tiptext {
    text-align: center;
}

.abandon {
    display: flex;
    padding: 33px 0;

    img {
        width: 36px;
        height: 36px;
    }

    .photo {
        display: flex;
        align-items: center;
        margin-right: 5px;
    }

    .abandonstyle {
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        :deep .el-form-item {
            margin-bottom: 0;
        }
    }
}

.allcontent {
    padding: 24px 38px;
}

.content {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    // &>div {
    //   cursor: pointer;
    // }

    // .both {
    //   border: 1px solid #ff6b00 !important;
    // }

    .column {
        display: flex;
        flex-direction: column;
        align-items: center;
        border: 1px solid #eaeaea;
        border-radius: 4px;
        width: 160px;
        height: 160px;
        box-sizing: border-box;
        padding: 22px 40px;

        img {
            width: 80px;
            height: 80px;
        }

        &:hover {
            cursor: pointer;
            border-color: #ff6b00;
        }

        .text {
            margin-top: 11px;
            font-weight: 500;
            color: #33302d;
        }
    }
}
</style>
